<!DOCTYPE html>
<html lang="en">
<head>
	<title>ajax.js :: Unit Tests :: ProtoLove</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="../lib/qunit/qunit.js"></script>
	<script type="text/javascript" src="../src/ajax.js"></script>
	<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen" />
</head>
<body>

<div id="unit-output">
	<h1 id="qunit-header">ProtoLove Unit Tests - ajax.js</h1>
	<h2 id="qunit-banner"></h2>
	<h2 id="qunit-userAgent"></h2>
	<ol id="qunit-tests"><li></li></ol>
</div>
<div id="unit-page-content">
	<div id="update-me"></div>
	<form id="ajax-form" method="get" action="ajax/form.php">
		<p>
			text
			<input type="text" name="os" value="Linux" />
			<br />
			checkbox group
			<input type="checkbox" name="version[]" value="2.26" />
			<input type="checkbox" name="version[]" value="2.27" checked="checked" />
			<br />
			radio group
			<input type="checkbox" name="distro" value="CentOS" />
			<input type="checkbox" name="distro" value="Ubuntu" checked="checked" />
			<br />
			textarea
			<textarea name="note">JavaScript Rocks</textarea>
			<br />
			select
			<select name="form-factor">
				<option value="desktop">Desktop</option>
				<option value="laptop" selected="selected">Laptop</option>
				<option value="netbook">Netbook</option>
				<option value="tablet">Tablet</option>
			</select>
			<br />
			milti-select (one chosen)
			<select name="add-ons">
				<option value="bluetooth">Bluetooth</option>
				<option value="webcam" selected="selected">Web Cam</option>
				<option value="surround">Virtual Surround Sound</option>
			</select>
			<br />
			milti-select (multiple chosen)
			<select name="accessories" multiple="multiple">
				<option value="headphones" selected="selected">Headphones</option>
				<option value="thumbdrive16" selected="selected">16GB Thumb Drive</option>
				<option value="travelbag">Travel Bag</option>
			</select>
			<br />
			2d array
			<input type="text" name="addl[a]" value="note-a" />
			<input type="text" name="addl[b]" value="note-b" />
			<br />
			buttons
			<input type="reset" value="Reset" />
			<input type="submit" name="save" value="Click to see JSON" />
		</p>
	</form>
</div>

<script type="text/javascript">

with (QUnit) {

	test('object serialization', function() {
		equal(ajax.objectToParams({}), '', 'empty query');
    equal(ajax.objectToParams({a:undefined, b:'c'}, ';'), 'a;b=c', 'custom delimiter');
    equal(ajax.objectToParams({a:undefined}), 'a', 'key without value (undefined value)');
    equal(ajax.objectToParams({a:'b', c:''}), 'a=b&c', 'empty string value');
    equal(ajax.objectToParams({a:'b', c:null}), 'a=b&c', 'null value');
    equal(ajax.objectToParams({a:'b', c:0}), 'a=b&c=0', 'zero value');
    equal(ajax.objectToParams({a:'b',d:[]}), 'a=b&d[]', 'empty array');
    equal(ajax.objectToParams({a:'b',d:[1,2,3]}), 'a=b&d[]=1&d[]=2&d[]=3', 'array values');
    equal(ajax.objectToParams({'a b':'c', d:'e f', g:'h'}), 'a%20b=c&d=e%20f&g=h', 'proper encoding');
	});

	test('update an element\'s HTML', function() {
		expect(2);
		stop(2000);

		var callbacks = [];
		ajax('ajax/update.html', {
			element: 'update-me',
			onDebug: function(name) {
				if (name == 'onInteractive' || name == 'onLoading') {
					return;
				}
				callbacks.push(name);
			},
			onSuccess: function() {
				same(callbacks, ['onLoaded','onComplete','on200','onSuccess'], 'all events fired and in correct order');
				equal(document.getElementById('update-me').innerHTML.toLowerCase(), '<p>my html.</p>', 'element HTML set');
				start();
			}
		});
	});

	test('eval json', function() {
		expect(1);
		stop(2000);

		ajax('ajax/recipe-json.php', {
			onSuccess: function() {
				same(this.responseJSON, {"Recipe":[1,"egg"],"Author":"Sandy"}, 'JSON eval\'ed ok');
				start();
			}
		});
	});

	test('eval external js globally', function() {
		expect(1);
		stop(2000);

		ajax('ajax/globalVar.js', {
			onSuccess: function() {
				same(window.globalVar, true, 'JS eval\'ed globally');
				start();
			}
		});
	});

	test('xml doc by header', function() {
		expect(2);
		stop(2000);

		ajax('ajax/faves.xml', {
			onSuccess: function() {
				var favNumber = this.responseXML.documentElement.childNodes.item(1);
				same(favNumber.nodeType, 1, 'nodeType');
				same(favNumber.firstChild.nodeValue, "42", 'nodeValue');
				start();
			}
		});
	});

	test('404', function() {
		expect(1);
		stop(2000);

		ajax('ajax/404.html', {
			on404: function() {
				ok(true, 'on404 callback fired');
				start();
			}
		});
	});

	test('form serialization', function() {
		//expect(1);
		stop(2000);

		ajax({
			form: 'ajax-form',
			json: true,
			onComplete: function() {
				var serial = {
					os:"Linux",
					version:["2.27"],
					distro:"Ubuntu",
					note:"JavaScript Rocks",
					"form-factor":"laptop",
					"add-ons":"webcam",
					accessories:["headphones","thumbdrive16"],
					addl:{a:"note-a",b:"note-b"},
					save:"Click to see JSON"
				};
				same(this.responseJSON.os, serial.os, 'input value');
				same(this.responseJSON.version, serial.version, 'single checkbox value');
				same(this.responseJSON.distro, serial.distro, 'radio value');
				same(this.responseJSON.note, serial.note, 'textarea value');
				same(this.responseJSON["form-factor"], serial["form-factor"], 'select value');
				same(this.responseJSON.addl, serial.addl, '2d array');
				same(this.responseJSON.save, serial.save, 'submit button');
				// nothing added or missing
				same(this.responseJSON, serial, 'overall match');
				start();
			}
		});
	});

}
</script>

</body>
</html>